<template>
    <div class="problem">
        <el-card>
            <!-- 表格区域 -->
            <div class="table-body">
                <el-table ref="listData" style="margin-top: 10px" :data="listData" v-loading="loading">
                    <el-table-column prop="feedbackOptions" label="选项" />
                    <el-table-column prop="content" label="提交内容" />
                    <el-table-column prop="imgUrl" label="提交图片">
                        <template slot-scope="scope" v-if="scope.row.imgUrl">
                            <el-image 
                                v-for="(item,index) in scope.row.imgUrl"
                                :key="index"
                                style="width: 50px; height: 50px;margin-right:10px"
                                :src="item" 
                                :preview-src-list="scope.row.imgUrl">
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="提交时间" />
                    <!-- <el-table-column prop="address" label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click="editPop(scope.row)">处理</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="page_box" v-show="total>0">
                <pagination
                    :page.sync="params.current"
                    :limit.sync="params.size"
                    @pagination="getList"
                    :total="total"
                />
            </div>
        </el-card>
    </div>
</template>

<script>
import { getProblemFeedbackPage } from '@/api/user'
export default {
    data(){
        return{
            params: {
                current: 1,
                size: 10
            },
            listData: [],
            total: 0,
        }
    },
    created() {
        this.getList()
    },
    methods:{
        // 获取列表
        getList() {
            this.loading = true
            getProblemFeedbackPage(this.params).then(res => {
                if (res.statusCode === '00000') {
                setTimeout(() => {
                    this.loading = false
                    this.listData = res.data.records
                    this.total = res.data.total
                }, 300);
                }
            })
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style lang="scss" scoped>
.problem {
  margin: 20px;
}
.pages{
    text-align: right;
    margin-top:20px;
}
</style>